<template>
    <div>
        <div @click="showUpload">
            <slot></slot>
        </div>
        <el-dialog
            title="导入表单项"
            :visible.sync="show"
            :close-on-click-modal="false"
            destroy-on-close
            width="800px"
            custom-class="import-options">
            <div class="content">
                <div class="left" v-if="!accept.includes('jpg')">
                    <upLoad-normal
                        :accept="accept"
                        :isSingle="true"
                        @httpRequest="httpRequest">
                        <el-link type="primary" class="import-excel" :underline="false">导入excel</el-link>
                    </upLoad-normal>
                </div>
                <div class="left" v-else>
                    <upLoad-cos
                        :isSingle="true"
                        @onUpdate="onUpdate"
                        :accept="accept"
                        type="form-discern"
                        fileType="doc">
                    </upLoad-cos>
                </div>
                <div class="right" v-loading="loading">
                    <span v-if="!accept.includes('jpg')">识别excel前5行文字</span>
                    <div class="head-box">
                        <span>识别结果</span>
                        <div>
                            <el-checkbox :disabled="!checkboxList.length" v-model="checkedAll" @change="selectAll">全选</el-checkbox>
                            <el-button :disabled="!checkboxList.length" class="reverse-btn" type="text" @click="reverseElection">反选</el-button>
                        </div>
                    </div>
                    <div class="result-content">
                        <el-checkbox-group v-model="checkList" @change="changeSelect">
                            <template v-for="(item, index) in checkboxList">
                                <p :key="index"><el-checkbox :label="item">{{item}}</el-checkbox></p>
                            </template>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeUpload">取消</el-button>
                <el-button type="primary" @click="importOption">导入</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import UpLoadCos from "@/components/upload-cos/index.vue";
import UpLoadNormal from "@/components/upload-normal/index.vue";

@Component({
    name: "UploadImgGetOptions",
    components: {
        UpLoadCos,
        UpLoadNormal
    }
})
export default class UploadImgGetOptions extends Vue {
    @Prop({
        type: String,
        default: () => {
            return "*";
        }
    })
    readonly accept!: any;

    show = false
    checkedAll = false
    checkList: any[] = []
    checkboxList: any[] = []
    loading = false

    // 全选
    selectAll() {
        if (this.checkedAll) {
            this.checkList = this.checkboxList.map((item: any) => item);
        } else {
            this.checkList = [];
        }
    }

    // 修改选项
    changeSelect() {
        this.checkedAll = this.checkboxList.length === this.checkList.length;
    }

    // 反选
    reverseElection() {
        this.checkList = this.checkboxList.filter((item: any) => {
            return !this.checkList.includes(item);
        }).map((item: any) => {
            return item;
        });
        this.changeSelect();
    }

    showUpload() {
        this.show = true;
    }

    closeUpload() {
        this.checkboxList = [];
        this.checkedAll = false;
        this.checkList = [];
        this.show = false;
    }

    importOption() {
        this.$emit("importOptions", this.checkList);
        this.closeUpload();
    }

    async onUpdate(list: any) {
        this.checkboxList = [];
        this.checkedAll = false;
        this.checkList = [];
        const url = list[0].host + "/" + list[0].url;
        this.loading = true;
        const res = await this.$server.ocrImg({
            data: {
                url
            }
        });
        this.loading = false;
        if (res.data.code === 200) {
            this.checkboxList = Array.from(new Set(res.data.data));
        } else {
            this.$message.error("图片无法识别");
        }
    }

    async httpRequest(fileList: any[]) {
        const form = new FormData();
        for (let i = 0; i < fileList.length; i++) {
            form.append('file', fileList[i], fileList[i].name);
        }
        const res = await this.$server.ocrExcel({
            data: form
        });
        if (res.data.code === 200) {
            this.checkboxList = Array.from(new Set(res.data.data));
        } else {
            this.$message.error("文件无法识别");
        }
    }
}
</script>

<style lang="scss" scoped>
.import-options {
    .content {
        @include flexLayout(flex,normal,normal);

        .left {
            .upload-demo {
                .import-excel {
                    width: 440px;
                    height: 437px;
                    border: 1px dashed #d9d9d9;
                    text-align: center;
                }
            }
            ::v-deep {
                .upload-custom {
                    .el-upload-dragger {
                        width: 440px;
                        height: 437px;
                        .el-icon-upload {
                            margin-top: 170px;
                        }
                    }
                    .el-upload {
                        overflow: hidden;
                        width: 440px;
                        height: 437px;
                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                }
            }
        }
        .right {
            width: 300px;
            margin-left: 20px;
            .head-box {
                border-bottom: 1px solid #909497;
                @include flexLayout(flex,justify,center);
                .reverse-btn {
                    margin-left: 20px;
                }
                .item-icon {
                    cursor: pointer;
                }
            }
            .result-content {
                max-height: 400px;
                overflow-y: auto;
            }
        }
    }
}
::v-deep {
    .avatar {
        max-width: 100%;
        width: unset!important;
        height: unset!important;
    }
}
</style>
